<template>
  <el-container direction="vertical">

    <navMenu width="100%"></navMenu>

    <el-container direction="horizontal">
      <el-aside width="280px" height="100%">
        <sideBar class="menu" page-index="1-5" open-index="1"></sideBar>
      </el-aside>
      <el-main>
        <!--        <p>this is staff page</p>-->
        <!--搜索栏-->
        <el-container direction="horizontal">
          <el-input v-model="words.word" placeholder="请输入想要查询的部门、岗位、职员的编号或名称（支持模糊查询）"></el-input>
          <el-button style="margin-left: 20px" @click="vague()">搜索</el-button>
          <el-button @click="drawer = true; haveitem()" type="primary" style="margin-left: 16px;">添加</el-button>
          <el-drawer
            title="新增人岗"
            :visible.sync="drawer"
            :direction="direction"
            ref="thisdrawer"
            size="300px">
            <!--            :before-close="handleClose"-->

            <el-row :gutter="20" style="margin-bottom: 12px">
              <el-col :span="20" :offset="2">选择部门</el-col>
            </el-row>
            <el-row :gutter="20" style="margin-bottom: 30px">
              <el-col :span="20" :offset="2">
                <el-select v-model="newocpsinfo.department_id" placeholder="请选择部门">
                  <el-option
                    v-for="item in data_department"
                    :key="item.dep_name"
                    :value="item.dep_id"
                    :label="item.dep_name">
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.dep_name }}</span>
                    <span style="float: left; color: #8492a6; font-size: 13px">{{ item.dep_id }}</span>
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-bottom: 12px">
              <el-col :span="20" :offset="2">选择岗位</el-col>
            </el-row>
            <el-row :gutter="20" style="margin-bottom: 30px">
              <el-col :span="20" :offset="2">
                <el-select v-model="newocpsinfo.occupa_id" placeholder="请选择岗位">
                  <el-option
                    v-for="item in data_occupation"
                    :key="item.ocp_name"
                    :value="item.ocp_id"
                    :label="item.ocp_name">
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.ocp_name }}</span>
                    <span style="float: left; color: #8492a6; font-size: 13px">{{ item.ocp_id }}</span>
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-bottom: 12px">
              <el-col :span="20" :offset="2">选择职员</el-col>
            </el-row>
            <el-row :gutter="20" style="margin-bottom: 40px">
              <el-col :span="20" :offset="2">
                <el-select v-model="newocpsinfo.staff_id1" placeholder="请选择职员">
                  <el-option
                    v-for="item in data_staff"
                    :key="item.staff_name"
                    :value="item.staff_id"
                    :label="item.staff_name">
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.staff_name }}</span>
                    <span style="float: left; color: #8492a6; font-size: 13px">{{ item.staff_id }}</span>
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="10" :offset="7">
                <el-button type="primary" style="width: 100%" @click="newocps()">确认提交</el-button></el-col>
            </el-row>
          </el-drawer>
        </el-container>


        <!--部门列表-->
        <el-table
          v-if="showtable==1"
          :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
          height="502"
          style="width: 100%; margin-top: 16px">

          <el-table-column type="expand">
            <template  slot-scope="scope1">
              <el-table
                :data="scope1.row.subocps"
                style="width: 100%"
                size="small">
                <el-table-column
                  prop="department_id"
                  label="部门编号"
                  width="100px">
                </el-table-column>
                <el-table-column
                  prop="department_name"
                  label="部门名称">
                </el-table-column>
                <el-table-column
                  prop="occupa_id"
                  label="岗位编号">
                </el-table-column>
                <el-table-column
                  prop="occupa_name"
                  label="岗位名称">
                </el-table-column>
                <el-table-column
                  prop="staff_id"
                  label="员工编号">
                </el-table-column>
                <el-table-column
                  prop="staff_name"
                  label="员工姓名">
                </el-table-column>
                <el-table-column label="操作" width="100px">
                  <template slot-scope="scope">
                    <el-button icon="el-icon-edit" circle size="mini"
                               @click="editstaff(scope.row)"></el-button>

                    <el-button icon="el-icon-delete" circle size="mini"
                               @click="deleteocpsinfo.department_id=scope.row.department_id
                               deleteocpsinfo.occupa_id=scope.row.occupa_id
                               deleteocpsinfo.staff_id=scope.row.staff_id
                               handleDelete()"></el-button>
                  </template>
                </el-table-column>
              </el-table>



            </template>
          </el-table-column>

          <el-table-column
            prop="dpmt_id"
            label="序号"
            width="100px">
          </el-table-column>

          <el-table-column
            prop="dpmt_name"
            label="部门名称">
          </el-table-column>

          <el-table-column
            prop="job_type"
            label="工作类型">
          </el-table-column>
          <el-table-column
            prop="attr_com"
            label="直属上级">
          </el-table-column>
        </el-table>



        <el-table
          v-else-if="showtable==2"
          :data="tableData1.slice((currentPage-1)*pagesize,currentPage*pagesize)"
          height="502"
          style="width: 100%; margin-top: 16px">
          <el-table-column
            key="1"
            prop="department_id"
            label="部门编号"
            width="100px">
          </el-table-column>
          <el-table-column
            key="1"
            prop="department_name"
            label="部门名称">
          </el-table-column>
          <el-table-column
            key="1"
            prop="occupa_id"
            label="岗位编号">
          </el-table-column>
          <el-table-column
            key="1"
            prop="occupa_name"
            label="岗位名称">
          </el-table-column>
          <el-table-column
            key="1"
            prop="staff_id"
            label="员工编号">
          </el-table-column>
          <el-table-column
            key="1"
            prop="staff_name"
            label="员工姓名">
          </el-table-column>
          <el-table-column  key="1" label="操作" width="100px">
            <template slot-scope="scope">
              <el-button icon="el-icon-edit" circle size="mini"
                         @click="editstaff(scope.row)"></el-button>
              <el-drawer
                title="人事变动" size="300px"
                :visible.sync="drawer2"
                :direction="direction"
                ref="thisdrawer2">

                <el-row :gutter="20" style="margin-top: 20px">
                  <el-col :span="20" :offset="2">部门编号:  {{editocpsinfo.department_id}}</el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 20px">
                  <el-col :span="20" :offset="2">部门名称： {{editocpsinfo.department_name}}</el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 20px">
                  <el-col :span="20" :offset="2">岗位编号： {{editocpsinfo.occupa_id}}</el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 20px">
                  <el-col :span="20" :offset="2">岗位名称： {{editocpsinfo.occupa_name}}</el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 20px">
                  <el-col :span="20" :offset="2">职员编号</el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 10px">
                  <el-col :span="20" :offset="2">
                    <el-select v-model="editocpsinfo.staff_id1">
                      <el-option
                        v-for="item in data_staff"
                        :key="item.staff_name"
                        :value="item.staff_id"
                        :label="item.staff_name">
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.staff_name }}</span>
                        <span style="float: left; color: #8492a6; font-size: 13px">{{ item.staff_id }}</span>
                      </el-option>
                    </el-select>
                  </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 30px">
                  <el-col :span="10" :offset="7">
                    <el-button @click="handleEdit()" type="primary" style="width: 100%">确认提交</el-button></el-col>
                </el-row>
              </el-drawer>
              <el-button icon="el-icon-delete" circle size="mini"
                         @click="deleteocpsinfo.department_id=scope.row.department_id
                               deleteocpsinfo.occupa_id=scope.row.occupa_id
                               deleteocpsinfo.staff_id=scope.row.staff_id
                               handleDelete()"></el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-drawer
          title="人事变动" size="300px"
          :visible.sync="drawer2"
          :direction="direction"
          ref="thisdrawer2">

          <el-row :gutter="20" style="margin-top: 20px">
            <el-col :span="20" :offset="2">部门编号:  {{editocpsinfo.department_id}}</el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 20px">
            <el-col :span="20" :offset="2">部门名称： {{editocpsinfo.department_name}}</el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 20px">
            <el-col :span="20" :offset="2">岗位编号： {{editocpsinfo.occupa_id}}</el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 20px">
            <el-col :span="20" :offset="2">岗位名称： {{editocpsinfo.occupa_name}}</el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 20px">
            <el-col :span="20" :offset="2">职员编号</el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 10px">
            <el-col :span="20" :offset="2">
              <el-select v-model="editocpsinfo.staff_id1">
                <el-option
                  v-for="item in data_staff"
                  :key="item.staff_name"
                  :value="item.staff_id"
                  :label="item.staff_name">
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.staff_name }}</span>
                  <span style="float: left; color: #8492a6; font-size: 13px">{{ item.staff_id }}</span>
                </el-option>
              </el-select>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 30px">
            <el-col :span="10" :offset="7">
              <el-button @click="handleEdit()" type="primary" style="width: 100%">确认提交</el-button></el-col>
          </el-row>
        </el-drawer>


        <el-drawer
          title="人事变动" size="300px"
          :visible.sync="drawer2"
          :direction="direction"
          ref="thisdrawer2">

          <el-row :gutter="20" style="margin-top: 20px">
            <el-col :span="20" :offset="2">部门编号:  {{editocpsinfo.department_id}}</el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 20px">
            <el-col :span="20" :offset="2">部门名称： {{editocpsinfo.department_name}}</el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 20px">
            <el-col :span="20" :offset="2">岗位编号： {{editocpsinfo.occupa_id}}</el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 20px">
            <el-col :span="20" :offset="2">岗位名称： {{editocpsinfo.occupa_name}}</el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 20px">
            <el-col :span="20" :offset="2">职员编号</el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 10px">
            <el-col :span="20" :offset="2">
              <el-select v-model="editocpsinfo.staff_id1">
                <el-option
                  v-for="item in data_staff"
                  :key="item.staff_name"
                  :value="item.staff_id"
                  :label="item.staff_name">
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.staff_name }}</span>
                  <span style="float: left; color: #8492a6; font-size: 13px">{{ item.staff_id }}</span>
                </el-option>
              </el-select>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 30px">
            <el-col :span="10" :offset="7">
              <el-button @click="handleEdit()" type="primary" style="width: 100%">确认提交</el-button></el-col>
          </el-row>
        </el-drawer>

        <!--角标-->
        <div style="text-align: center;margin-top: 20px;">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="current_change">
          </el-pagination>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import sideBar from "@/components/sideBar";
import navMenu from "@/components/navMenu";

export default {
  components: {sideBar, navMenu},
  data() {
    return {
      tableData: [],
      tableData1: [],
      data_department: [{"dep_id":'',"dep_name":''}],
      data_occupation: [{"ocp_id":'', "ocp_name":''}],
      data_staff: [{"staff_id":'', "staff_name":''}],
      table: [],
      total: 0,
      pagesize: 8,
      currentPage: 1,
      st: 2,
      words: {
        word: ''
      },

      showtable:1,

      drawer: false,
      drawer2: false,
      direction: 'rtl',

      newocpsinfo: {
        department_id: '', occupa_id: '', staff_id1: ''
      },

      deleteocpsinfo:{
        department_id: '', occupa_id:'', staff_id:''
      },
      editocpsinfo: {
        department_id: '', department_name: '',
        occupa_id: '', occupa_name: '',
        staff_id: '', staff_id1:''
      }
    }
  },
  mounted() {
    this.showtable= 1;
    this.$axios.get(`http://127.0.0.1:5000/ocps/init`).then((res) => {
      console.log(res);
      this.tableData = res.data;
      this.total = this.tableData.length+3;
      console.log(res.data);
    });
    console.log("fds")
  },
  methods: {
    current_change: function (currentPage) {
      this.currentPage = currentPage;
    },async vague() {
      this.$axios.post(`http://127.0.0.1:5000/ocps/select`, this.words).then((res) => {
        console.log(res);
        if(res.data==0){
          this.$message('没有符合查询条件的结果');
        }
        else {
          this.showtable=2;
          this.tableData1 = res.data;
          this.total = this.tableData1.length;
        }
      });
    }, async handleDelete() {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post(`http://127.0.0.1:5000/ocps/delete`, this.deleteocpsinfo).then((res) => {
          console.log(res.data);
          this.st = res.data;
          if (this.st==1){
            this.$message('删除成功');
            window.location.reload();}
          else{
            this.$message('删除失败,该职工为在职员工，请先为其解除人岗关系！');
          }
          this.st = 2;
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    async haveitem(){
      this.$axios.get(`http://127.0.0.1:5000/ocps/item_department`).then((res) => {
        console.log(res);
        this.data_department = res.data;
      });
      this.$axios.get(`http://127.0.0.1:5000/ocps/item_occupation`).then((res) => {
        console.log(res);
        this.data_occupation = res.data;
      });
      this.$axios.get(`http://127.0.0.1:5000/ocps/item_staff`).then((res) => {
        console.log(res);
        this.data_staff = res.data;
      });
    },
    async editstaff(row){
      this.$axios.get(`http://127.0.0.1:5000/ocps/item_staff`).then((res) => {
        console.log(res);
        this.data_staff = res.data;
        console.log("进入edit")
      });
      this.editocpsinfo.department_id=row.department_id
      this.editocpsinfo.department_name=row.department_name
      this.editocpsinfo.occupa_id=row.occupa_id
      this.editocpsinfo.occupa_name=row.occupa_name
      this.editocpsinfo.staff_id=row.staff_id
      this.drawer2 = true
      console.log("dddd")
    },
    async newocps() {
      if (this.newocpsinfo.department_id==''){
        this.$message('请选择部门');
      }
      else if(this.newocpsinfo.occupa_id=='')
        this.$message('请选择岗位');
      else if(this.newocpsinfo.staff_id1=='')
        this.$message('请选择职员');
      else
        this.$axios.post(`http://127.0.0.1:5000/ocps/newocps`, this.newocpsinfo).then((res) => {
          console.log(res);
          this.st = res.data;

          if (this.st==1) {
            this.$message('新增成功');
            this.$refs.thisdrawer.closeDrawer();
            window.location.reload();
          }
          else {
            this.$message('新增失败！');
            this.$refs.thisdrawer.closeDrawer();
          }
          this.st=2;
        });
    },
    handleEdit() {
      console.log("进入处理edit")
      if (this.editocpsinfo.staff_id=='')
        this.$message('请选择员工!');
      else
        this.$axios.post(`http://127.0.0.1:5000/ocps/editocps`, this.editocpsinfo).then((res) => {
          console.log(res);
          this.st = res.data;

          if (this.st==1) {
            this.$message('修改成功');
            this.$refs.thisdrawer2.closeDrawer();
            window.location.reload();
          }
          else{
            this.$message('修改失败！');
            this.$refs.thisdrawer2.closeDrawer();
          }
          this.st.statu=2;
        });
    }
  }
}
</script>

<style>

.menu{
  width: 100%;
  float: left;
  height: 700px;
}

</style>

